<template>
	<s-layout title="订单管理" tabbar="/manage/pages/order/index" :showLeftBtn="false">
		<su-sticky bgColor="#fff">
			<uni-search-bar placeholder="搜索关键字" radius="27" @confirm="search" @cancel="search" />
			<su-tabs :list="state.tabs" lineColor="#3A43FF" :scrollable="false" @change="changeTab"
				:current="state.activeTab"></su-tabs>
		</su-sticky>
		<view class="content">
			<view class="card" v-for="item in state.list" :key="item.id" @click="toDetil(item.id)">
				<view class="user">
					<text>{{item.user_consignee}}：{{item.user_mobile}}</text>
					<image class="phone" src="../../static/phone.png" mode="aspectFill"
						@click.stop="contact(item.user_mobile)"></image>
				</view>
				<view class="order-info">
					<text>订单编号：{{item.order_sn}}</text>
					<text class="status">{{item.status_text}}</text>
				</view>
				<view class="goods-box" v-for="item2 in item.items" :key="item2.id">
					<img :src="sheep.$url.cdn(item2.goods_image)" alt="" class="goods-img" />
					<view class="info">
						<view class="title">
							{{item2.goods_title}}
						</view>
						<view v-if="item2.goods_sku_text">
							规格：{{item2.goods_sku_text}}
						</view>
						<view class="quantity">
							<text>×{{item2.goods_num}}</text>
							<text class="price">￥{{item2.goods_price}}</text>
						</view>
					</view>
				</view>
				<view class="total">
					<view>
						合计：
						<text class="price">￥{{item.pay_fee}}</text>
						(含运费：￥{{item.dispatch_amount}})
					</view>
				</view>
				<view class="more-btn">
					<!-- <button class="ss-reset-button more" @tap.stop="">
						更多
					</button> -->
					<view class="btns">
						<button v-if="item.status_code == 'nosend'" class="ss-reset-button"
							@tap.stop="remark(item.id,item.memo)">
							备注
						</button>
						<button v-if="item.status_code == 'nosend'" class="ss-reset-button shipping"
							@tap.stop="dispatch(item)">
							发货
						</button>
						<button v-if="item.status_code == 'apply_refund'" class="ss-reset-button shipping"
							@tap.stop="confimRetrun(item)">
							退款
						</button>
					</view>
				</view>
			</view>
		</view>

		<uni-load-more v-if="state.list.length > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.list.length === 0" icon="/static/soldout-empty.png" text="暂无商品">
		</s-empty>


		<!--备注弹窗-->
		<su-popup :show="state.showRemarkPop" position="bottom" round="10" showClose="true" @close="closeRemark">
			<view class="popup">
				<view class="title">备注</view>
				<textarea v-model="state.remarkInfo.memo" placeholder="请输入备注信息" class="textarea"></textarea>
				<view class="btns">
					<button class="ss-reset-button" @tap="closeRemark">取消</button>
					<button class="ss-reset-button sub-btn" @tap="submitRemark">确认</button>
				</view>
			</view>
		</su-popup>

		<!--发货弹窗-->
		<su-popup :show="state.showDispatchPop" position="bottom" round="10" showClose="true" @close="closeDispatch">
			<view class="popup">
				<view class="title">发货</view>
				<uni-list class="list">
					<uni-data-checkbox v-model="state.dispatchInfo.method"
						:localdata="state.statusList"></uni-data-checkbox>
				</uni-list>
				<template v-if="'input' === state.dispatchInfo.method">
					<view class="title">快递名称</view>
					<input v-model="state.express.name" placeholder="请输入快递名称" class="input"></input>
					<view class="title">快递单号</view>
					<input v-model="state.express.no" placeholder="请输入快递单号" class="input"></input>
					<view class="title">快递代码</view>
					<input v-model="state.express.code" placeholder="请输入快递代码" class="input"></input>
				</template>
				<view class="btns">
					<button class="ss-reset-button" @tap="closeDispatch">取消</button>
					<button class="ss-reset-button sub-btn" @tap="submitDispatch">确认</button>
				</view>
			</view>
		</su-popup>
		<!-- 同意退款弹框 -->
		<view :class="{ 'share-box': state.showConfimModel }"></view>
		<view class="model" v-if="state.showConfimModel" :class="{ 'share-show': state.showConfimModel }">
			<!-- 文本 -->
			<view class="wxbox">
				<view class="d-flex j-center pb-2 ">同意退款</view>
				<view class="wxbox-inpt-box w-90 pl-4 pr-4">
					<view class="pt-2">
						<radio-group class="d-flex" @change="onRefundChange">
							<label class="ss-flex ss-col-center ss-p-y-10" v-for="(item, index) in state.refundTypeList"
								:key="index">
								<radio :checked="state.confimParamsData.refund_type === item.value" color="#6780FF"
									style="transform: scale(0.8)" :value="item.value" />
								<view class="item-value ss-m-l-8">{{ item.text }}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="btn btn-back" @click="confimRetrunFun">确认退款</view>
				<view class="close" @click="state.showConfimModel = false">
					<icon type="clear" size="26" />
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';
	import tools from '@/sheep/helper/tools';

	const state = reactive({
		keyword: "",
		activeTab: 0,
		activeTabValue: 'all',
		tabs: [{
			name: '全部',
			value: 'all',
		}, {
			name: '待付款',
			value: 'unpaid',
		}, {
			name: '待发货',
			value: 'nosend',
		}, {
			name: '待收货',
			value: 'noget',
		}],
		list: [],
		page: 1,
		pageSize: 20,
		loadStatus: 'noMore',
		// 备注
		showRemarkPop: false,
		remarkInfo: {
			id: 0,
			memo: ""
		},
		// 发货
		showDispatchPop: false,
		dispatchInfo: {
			order_id: 0,
			actiontype: "confirm",
			method: "",
			order_item_ids: [],
			express: {}
		},
		express: {
			name: '',
			no: '',
			code: ''
		},
		statusList: [{
			text: '一键发货',
			value: 'api'
		}, {
			text: '物流快递',
			value: 'input'
		}],
		// 同意
		confimParamsData: {
			id: '',
			refund_type: 'back', //退回路线 back原路 money电子钱包
		},
		showConfimModel: false,
		refundTypeList: [
		{
			text: '原路退回',
			value: 'back',
		},
		{
			text: '电子钱包',
			value: 'money',
		}, ],
	})

	function contact(phone) {
		tools.callPhone(phone)
	}

	function remark(id, memo = '') {
		state.showRemarkPop = true;
		state.remarkInfo.id = id;
		state.remarkInfo.memo = memo
	}

	function closeRemark() {
		state.remarkInfo = {
			id: 0,
			memo: ""
		};
		state.showRemarkPop = false;
	}

	async function submitRemark() {
		const res = await sheep.$mapi.order.orderRemark(state.remarkInfo);
		if (res.code === 1) {
			uni.showToast({
				title: '备注成功',
				icon: 'success'
			});
			closeRemark();
		}
	}

	function dispatch(item) {
		state.showDispatchPop = true;
		state.dispatchInfo.order_id = item.id;
		let item_ids = [];
		const itemData = item.items;
		itemData.forEach(item => {
			item_ids.push(item.id)
		})
		state.dispatchInfo.order_item_ids = item_ids
	}

	function closeDispatch() {
		state.dispatchInfo = {
			order_id: 0,
			actiontype: "confirm",
			method: "",
			order_item_ids: [],
			express: {}
		};
		state.showDispatchPop = false;
	}
	/**
	 * @同意退款
	 */
	function confimRetrun (item) {
		state.confimParamsData.id = item.id
		state.showConfimModel = true
		console.log(state.confimParamsData)
	}
	
	function onRefundChange (e) {
		state.confimParamsData.refund_type = e.detail.value;
	}
	async function confimRetrunFun(){
		if (!state.confimParamsData.id) {
			uni.showToast({
				title: '请选择要退款的订单!',
				icon: 'none'
			});
			return
		}
		const res = await sheep.$mapi.order.cancelMoney(state.confimParamsData);
		state.showConfimModel = false
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
		setTimeout(() => {
			getList()
		}, 1000)
	}
	async function submitDispatch() {
		const express = {
			name: [state.express.name],
			no: [state.express.no],
			code: [state.express.code]
		}
		state.dispatchInfo.express = express;
		const res = await sheep.$mapi.order.orderDispatch(state.dispatchInfo);
		if (res.code === 1) {
			uni.showToast({
				title: '发货成功',
				icon: 'success'
			});
		}
		closeDispatch();
	}

	function toDetil(id) {
		sheep.$router.go('/manage/pages/order/detail', {
			id: id
		});
	}

	function search(e) {
		state.keyword = e.value;
		emptyList();
		getList();
	}

	function changeTab(e) {
		state.activeTab = e.index;
		state.activeTabValue = e.value;
		emptyList();
		getList();
	}

	async function getList() {
		state.loadStatus = 'loading';
		const info = {
			keyword: state.keyword,
			page: state.page,
			list_rows: state.pageSize,
			type: state.activeTabValue
		}
		const res = await sheep.$mapi.order.orderList(info);
		if (res.code === 1) {
			let newArr = res.data
			let initArr = state.list ? state.list : []
			const lastListNum = newArr.length
			if (state.page == 1) {
				state.list = res.data
			} else {
				state.list = initArr.concat(newArr)
			}
			if (lastListNum < state.pageSize) {
				state.loadStatus = 'noMore';
			} else {
				state.loadStatus = 'more';
			}
		}
	}

	function emptyList() {
		state.page = 1;
		state.list = [];
		state.loadStatus = 'noMore';
	}

	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			state.page++;
			getList();
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadmore();
	});

	onLoad((options) => {
		if (options && options.activeTab) {
			state.activeTab = options.activeTab
		}
		if (options && options.activeTabValue) {
			state.activeTabValue = options.activeTabValue
		}
		getList();
	});
</script>

<style lang="scss" scoped>
	.popup {
		padding: 28rpx;

		.list {
			margin-bottom: 10px;
			padding: 5px 0;
		}

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			margin-bottom: 40rpx;
		}

		.input {
			margin-bottom: 40rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333333;
			background: #F7F7F7;
			border-radius: 20rpx;
		}

		.textarea {
			box-sizing: border-box;
			width: 100%;
			height: 400rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333333;
			background: #F7F7F7;
			border-radius: 20rpx;
			margin-bottom: 50rpx;
		}

		.btns {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			>button {
				width: 48%;
				height: 80rpx;
				font-size: 28rpx;
				color: #333333;
				background: #F7F7F7;
				border-radius: 80rpx;
			}

			.sub-btn {
				color: #fff;
				background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
			}
		}
	}

	.content {
		padding: 28rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 28rpx;
		margin-bottom: 24rpx;

		>view {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.user {
		padding: 16rpx 20rpx;
		background: #F7F7F7;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: 600;

		.phone {
			width: 58rpx;
			height: 58rpx;
		}
	}

	.order-info {
		margin-top: 26rpx;
		font-size: 26rpx;
		color: #999999;

		.status {
			font-weight: 600;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.goods-box {
		margin-top: 30rpx;
		justify-content: start !important;

		.goods-img {
			width: 156rpx;
			height: 156rpx;
			background: #000000;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-right: 30rpx;
		}

		.info {
			flex: 1;
			height: 156rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 26rpx;
			color: #999999;

			.title {
				font-weight: 500;
				font-size: 30rpx;
				color: #1A1A1A;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
			}

		}

		.quantity {
			display: flex;
			justify-content: space-between;
			align-items: end;
			font-size: 26rpx;
			color: #1A1A1A;
		}

	}

	.price {
		font-weight: 500;
		font-size: 28rpx;
		color: #1A1A1A;
	}

	.total {
		justify-content: end !important;
		margin-top: 30rpx;
	}

	.more-btn {
		margin-top: 36rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #1A1A1A;

		.more {
			width: 100rpx;
		}

		.btns {
			display: flex;
			justify-content: end;
			flex: 1;

			>button {
				border-radius: 100rpx;
				width: 166rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				background: #F7F7F7;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				margin-left: 20rpx;
			}

			.shipping {
				color: #fff;
				background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
			}
		}
	}
	// 驳回弹框样式
	// 进入分享动画
	.share-show {
		transition: all 2s ease;
		transform: translateY(0%) !important;
	}
	
	.share-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: 0.3s;
		z-index: 999;
	}
	
	.model-mask {
		width: 100vw;
		height: 100vh;
		background: rgba(51, 51, 51, 0.5);
		// background-image: url('/static/newImg/user/modelback.png');
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		transition: 0.8s;
	}
	
	.model {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		// height: 700upx;
		border-radius: 8upx;
		z-index: 1000;
		transition: all 0.8s ease;
		transform: translateY(100%);
	
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	
		//微信弹窗
		.btn {
			width: 70%;
			margin: 20rpx auto;
			margin-top: 40rpx;
			padding: 20rpx 0px;
			text-align: center;
			border-radius: 34px;
			font-size: 30rpx;
			color: #fff;
			position: absolute;
			bottom: 0;
			left: 15%;
		}
	
		.wxbox {
			z-index: 998;
			width: 82%;
			height: 450upx;
			overflow-y: scroll;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx 0rpx;
			position: relative;
	
			.close {
				position: absolute;
				top: 5px;
				right: 10px;
				z-index: 999;
				text-align: center;
			}
	
			.wxbox-inpt-box {
				width: 100%;
				box-sizing: border-box;
				margin: 10upx auto;
				padding: 20upx 0 20upx 0;
				height: 60%;
				overflow: scroll;
	
				.wxbox-inpt {
					font-size: 26upx;
					color: #999;
					border-radius: 10upx;
					width: 100%;
					padding: 10rpx 20rpx;
					font-weight: 400;
				}
	
				.wxbox-inpt-confim {
					font-size: 26upx;
					color: #999;
					border-radius: 10upx;
					width: 100%;
					font-weight: 400;
				}
			}
		}
	}
</style>